本基础配置基于 webpack@3.0 版本

入口与输出

entry

• 单个入口打包

entry设置为一个入口，打包出来的文件只有一个js。__dirname 为项目根路径（nodejs）。

module.exports = {
    // 入口文件路径
    entry: __dirname + '/index.js',
}

• 多个入口打包

entry 设置为一个对象，包含多个属性（入口），打包后为多个文件。

module.exports = {
    // 入口文件路径
    entry: {
        app: __dirname + '/index.js',
        vendor: ['angular', '@uirouter/angularjs']
    }
}

• 提取第三方模块

第三方模块由于在资源更新时无需更新，所以打包成单独的一个文件进行缓存。

module.exports = {
    ...
    // 插件
    plugins: [
        ...
        // 防止第三方模块的文件 hash 值发生变化
        new webpack.HashedModuleIdsPlugin(),
        // 提取第三方模块
        new webpack.optimize.CommonsChunkPlugin({
            // 对应的entry数组vendor
            name: 'vendor',
            filename: 'js/vendor-[chunkhash:6].js'
        })
    ]
}

• 提取公共模块

将重复的模块提取出来单独作为一个文件（发生在提取第三方模块之后）。

module.exports = {
    ...
    // 插件
    plugins: [
        // 提取第三方模块
        ...
        // 提取公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/common-[chunkhash:6].js'
        })
    ]
}

output

• [name]：文件名变量
• [hash]：如果所有文件中，有一个文件发生变化则重新生成hash值，一般用于版本更新，[hash]作为目录
• [chunkhash]：只有当前文件变化则重新生成chunkhash值，一般用于js文件
• [contenthash]：用于css的hash值（css是以js的方式生成，需和js的chunkhash分开，不然css的变化会引起js的hash值变化），在extract-text-webpack-plugin插件中使用：new ExtractTextWebpackPlugin('css/base-[contenthash:6].css')
• publicPath：输出目录对应的公开URL，会影响后面导入的css以及css中引入的字体文件路径

module.exports = {
    // 打包输出路径
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name]-[chunkhash:6].js',
        publicPath: '/'
    }
}

常用loader

清理打包目录

// 安装所需包
$ cnpm install --save-dev clean-webpack-plugin

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        new ClearWebpackPlugin(['dist'])
    ]
}

生成入口模板

// 安装所需包
$ cnpm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new ClearWebpackPlugin({
            filename: 'index.html',
            // 默认模板
            template: './index.html'
        })
    ]
}

es6转义es5

// 安装所需包
$ cnpm install babel-loader babel-core babel-preset-es2015

// 配置js转义规则
module.exports = {
    module: {
        rules: [
            {
                test:/\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015']
                        }
                    }
                ],
                // 排除的文件夹
                exclude: /node_modules/
            }
        ]
    }
}

css合并

• 合并为单个文件

loader加载顺序： less-loader > css-loader > style-loader，这里使用css-loader的压缩功能。

// 安装所需包
$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less

// 配置css/less转义规则
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                // 合并
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader', options: { 
                                // 启用压缩
                                minimize: true 
                            }
                        },
                        {loader: 'less-loader'}
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin('css/style-[contenthash:6].css')
    ]
}

• 合并为多个文件

使用多个ExtractTextWebpackPlugin实例生成，用exclude,include参数隔离第三方库。

// 安装所需包
$ cnpm install --save-dev extract-text-webpack-plugin css-loader style-loader less-loader less

// 配置css/less转义规则
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// 生成多个实例，base存放第三方库，app为自定义
let baseCss = new ExtractTextWebpackPlugin('css/base-[contenthash:6].css');
let appCss = new ExtractTextWebpackPlugin('css/app-[contenthash:6].css');
module.exports = {
    module: {
        rules: [
            {
                test: /\.(css|less)$/,
                // 合并
                use: appCss.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader', options: { 
                                // 启用压缩
                                minimize: true 
                            }
                        },
                        {loader: 'less-loader'}
                    ]
                }),
                // 隔离第三方库
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                // 合并
                use: baseCss.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader', options: { 
                                // 启用压缩
                                minimize: true 
                            }
                        }
                    ]
                }),
                // 隔离第三方库
                include: /node_modules/
            }
        ]
    },
    plugins: [
        baseCss, appCss
    ]
}

css引入的文件

字体文件，图片

// 安装所需包
$ cnpm install file-loader

module.exports = {
    module: {
        rules: [
            {
                // 加载css中的字体文件
                test: /(\.ttf|\.woff2|\.woff|\.eot|\.svg|\.dtd)/,
                use: [
                    { 
                        loader: "file-loader"
                    }
                ]
            }
        ]
    }
}

html模板转换字符串

// 安装所需包
$ cnpm install raw-loader

module.exports = {
    module: {
        rules: [
            {
                // 将html文件转换为字符串
                test: /\.html$/,
                use: [{
                    loader: "raw-loader"
                }]
            }
        
        ]
    }
}

devServer

npm --save-dev webpack-dev-server

module.exports = {
    devServer: {
        // 服务器文件路径
        contentBase: './dist',
        // 不跳转url
        historyApiFallback: true,
        // inline模式url不用变化
        inline: ture,
        // 热更新
        hot: true,
        // 开启GZIP
        compress: true,
    }
}